<!-- src/components/HeaderComponents.vue -->
<template>
  <header class="app-header">
    <div class="logo">淘兴趣</div>
    <div class="search-container">
      <SearchInput @search="handleSearch" />
    </div>
    <nav class="nav-links">
      <router-link to="/homePage" class="nav-link" active-class="active">首页</router-link>
      <router-link to="/discoverPage" class="nav-link" active-class="active">发现</router-link>
      <router-link to="/draftBox" class="nav-link" active-class="active">创作中心</router-link>
      <router-link to="/message" class="nav-link" active-class="active">消息中心</router-link>
      <router-link to="/personal" class="nav-link" active-class="active">个人中心</router-link>
      <a href="javascript:void(0);" @click="logout" class="nav-link">退出</a>
    </nav>
  </header>
</template>

<script>
import SearchInput from '@/components/SearchInput.vue';

export default {
  components: {
    SearchInput
  },
  methods: {
    handleSearch(keyword) {
      console.log('执行搜索! keyword:', keyword);
      // 如果当前已经在搜索页面，且关键词相同，则刷新搜索结果
      if (this.$route.name === 'SearchView' && this.$route.query.keyword === keyword) {
        this.$router.replace({
          name: 'SearchView',
          query: { ...this.$route.query, refresh: Date.now() }
        });
      }
      // 否则跳转到搜索页面
      else {
        this.$router.push({
          name: 'SearchView',
          query: { keyword }
        });
      }
    },
    logout() {
      localStorage.removeItem('user');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.app-header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  height: 70px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e88e5;
  margin-right: 20px;
  white-space: nowrap;
}

.search-container {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  background-color: #e3f2fd;
  color: #1e88e5 !important;
}
</style>
